<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <% include "../login/header.html" %>
    <% include "../login/left.html" %>
    <div id="add-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="add-form">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">key</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="basic_key" placeholder="请输入key" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">value</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="basic_value" placeholder="请输入value"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">编辑模式</label>
                <div class="layui-input-inline">
                    <select name="edit" lay-verify="required" lay-search="">
                        <option value="0 ">可编辑</option>
                        <option value="1">只读</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">备注</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="note" placeholder="请输入备注" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="add-main">增加</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-add">退出</button>
                </div>
            </div>
        </form>
    </div>

    <div id="update-main" style="display: none; margin: 50px 0px 0px 0px">

        <form class="layui-form" id="update-form">
            <input type="hidden" name="id" id="baseDataId">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">key</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="basic_key" id="basic_key" placeholder="请输入key"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">value</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="basic_value" id="basic_value" placeholder="请输入value"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">编辑模式</label>
                <div class="layui-input-inline">
                    <select name="edit" lay-verify="required" lay-filter="sel_edit" id="edit" lay-search="">
                        <option value="0">可编辑</option>
                        <option value="1">只读</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">备注</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="note" id="note" placeholder="请输入备注"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="update-main">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-update">退出</button>
                </div>
            </div>
        </form>
    </div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>数据列表</legend>
        </fieldset>
        <div style="padding: 10px;">
                <span class="layui-breadcrumb">
                    <a href="/">首页</a>
                    <a>基础数据</a>
                    <a><cite>数据列表</cite></a>
                </span>
        </div>
        <div style="padding: 30px;" class="layui-form">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <label class="layui-form-label" style="width: 100px">key</label>
                    <input style="width: 400px" type="text" name="basic_key" placeholder="请输入key" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label" style="width: 100px">value</label>
                    <input style="width: 400px" type="text" name="basic_value" placeholder="请输入value"
                           class="layui-input">
                </div>
                <div style="top: 35px;" class="layui-col-md2 layui-col-md-offset1" lay-submit lay-filter="find"><a
                        class="layui-btn">查询</a></div>
            </div>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <a class="layui-btn" id="add">新增</a>
                    <a class="layui-btn" id="addConfigData">内存同步</a>
                    <a class="layui-btn" id="addPropData">刷入redis</a>
                    <table class="layui-table" lay-skin="nob" id="demo" lay-filter="tb_baseData"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
</div>
</div>
<script src="../static/layui/layui.js"></script>
<script src="../static/assets/js/global.js"></script>
<script src="/static/js/jquery.min.js" media="all"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['common'], function () {
        let common = layui.common;
        let $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            table = layui.table;

        let showLayer = function (title, name) {
            common.showLayer({title: title, width: '600px', height: '400px', name: name});
        };

        let close_add = document.getElementById('exit-add');
        close_add.addEventListener('click', function cancel() {
            layer.closeAll();
        });

        let close_update = document.getElementById('exit-update');
        close_update.addEventListener('click', function cancel() {
            layer.closeAll();
        });

        let add = document.getElementById('add');
        add.addEventListener('click', function cancel() {
            showLayer('新增数据', '#add-main');
        });

        table.render({
            elem: '#demo'
            , height: 500
            , url: '/baseData/getBaseData/' //数据接口
            , page: true //开启分页
            , title: '应用列表'
            , skin: "line"
            , even: true
            , cols: [[ //表头
                {type: 'checkbox', filter: 'key_val'}
                , {field: 'basic_key', title: 'key', cellMinWidth: 200}
                , {field: 'basic_value', title: 'value', cellMinWidth: 200}
                , {field: 'last_updated', title: '更新时间', cellMinWidth: 250}
                , {
                    field: 'edit', title: '编辑模式', cellMinWidth: 200, templet: function (d) {
                        return d.edit == 0 ? '<span class="layui-badge">可编辑</span>' : '<span class="layui-badge layui-bg-green">只读</span>'
                    }
                }
                , {field: 'note', title: '备注', cellMinWidth: 250}
                , {field: 'date_created', title: '创建时间', cellMinWidth: 250}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', cellMinWidth: 200}
            ]]
        });

//复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
        var ids = new Array();
        var table_data = new Array();
        var key_val = {};
        table.on('checkbox(tb_baseData)', function (obj) {
            var checkStatus = table.checkStatus('demo')
                , checkData = checkStatus.data; //得到选中的数据
            $.ajax({
                url: '/baseData/storageRedis', method: 'post', data: {checkData:JSON.stringify(checkData)}, success: (result) => {
                    if (result == 1) {
                        layer.msg('成功！');
                    } else {
                        layer.msg('失败！');
                    }
                }
            });
        });

        table.on('tool(tb_baseData)', (obj) => {
            let data = obj.data;
            $('#baseDataId')[0].value = data.id;
            $('#basic_key')[0].value = data.basic_key;
            $('#basic_value')[0].value = data.basic_value;
            $('#edit')[0].value = data.edit;
            $('#note')[0].value = data.note;
            if (obj.event === 'edit') {
                showLayer('修改数据', '#update-main');
                $("#edit").empty();
                if (data.edit == 1) {
                    $("#edit").append('<option selected value="1">只读</option>');
                    $("#edit").append('<option value="0">可编辑</option>')
                } else {
                    $("#edit").append('<option value="1">只读</option>');
                    $("#edit").append('<option selected value="0">可编辑</option>')
                }
                form.render('select');
            } else if (obj.event === 'del') {
                layer.confirm(`确定要删除数据吗？`, function (index, layero) {
                    $.ajax({
                        url: '/baseData/deleteBaseData', method: 'post', data: {id: data.id}, success: (result) => {
                            if (result == 1) {
                                table.reload('demo'); //数据刷新
                                layer.msg('成功！');
                            } else {
                                layer.msg('失败！');
                            }
                            //layer.close(index); //关闭弹层
                        }
                    });
                });
            }

        });

        form.on('submit(find)', function (data) {
            common.find(data, 'demo', '/baseData/find');
            return false;
        });

        form.on('submit(add-main)', function (data) {
            let params = data.field;
            let msg = {
                url: '/baseData/addBaseData',
                data: params
            };

            common.postMsg(msg, (data) => {
                if (data.success) {
                    layui.layer.closeAll();
                    layer.msg('添加成功');
                    layui.table.reload('demo');
                } else {
                    layer.msg(`添加失败,${data.msg}`);
                }
            });
            return false;
        });

        form.on('submit(update-main)', function (data) {
            let params = data.field;
            let msg = {
                url: '/baseData/editBaseData',
                data: params
            };
            common.postMsg(msg, (data) => {
                if (data.success) {
                    layui.layer.closeAll();
                    layer.msg('编辑成功');
                    table.reload('demo');
                } else {
                    layer.msg(`编辑失败,${data.msg}`);
                }
            });
            return false;
        });

    });

    $('#addPropData').on('click', function () {
        $.ajax({
            url: '/baseData/storageRedis', method: 'post', success: (result) => {
                if (result == 1) {
                    layer.msg('成功！');
                } else {
                    layer.msg('失败！');
                }
            }
        });
    })
</script>
</body>
</html>
